<template>
  <div class="map-component">
    <div class="choose-top">
      <div>
        <span class="split-box"></span>
        <span class="distribution">资源分布</span>
        <span class="split-line"></span>
        <el-popover placement="bottom" trigger="manual" v-model="popFlag">
          <div class="pop-pool">
            <el-cascader-panel :options="options" />
            <div class="bottom-button">
              <div class="cancel button" @click="toggle('cancel')">取消</div>
              <div class="course button" @click="toggle('course')">确定</div>
            </div>
          </div>
          <span class="toggle" slot="reference" @click="toggle">全网 <img src="../assets/bottom-arrow.png" alt="" /></span>
        </el-popover>
      </div>
      <div class="more">更多</div>
    </div>
    <div class="resource">
      <img src="../assets/resource.png" alt="">
      <span class="resource-text">资源池</span>
    </div>

    <div id="map" class="map" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
let chinaJson = require('../lib/map/china.json')
export default {
  data() {
    return {
      popFlag: false,
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout 布局'
                },
                {
                  value: 'color',
                  label: 'Color 色彩'
                },
                {
                  value: 'typography',
                  label: 'Typography 字体'
                },
                {
                  value: 'icon',
                  label: 'Icon 图标'
                },
                {
                  value: 'button',
                  label: 'Button 按钮'
                }
              ]
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio 单选框'
                },
                {
                  value: 'checkbox',
                  label: 'Checkbox 多选框'
                },
                {
                  value: 'input',
                  label: 'Input 输入框'
                },
                {
                  value: 'input-number',
                  label: 'InputNumber 计数器'
                },
                {
                  value: 'select',
                  label: 'Select 选择器'
                },
                {
                  value: 'cascader',
                  label: 'Cascader 级联选择器'
                }
              ]
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table 表格'
                },
                {
                  value: 'badge',
                  label: 'Badge 标记'
                }
              ]
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert 警告'
                },
                {
                  value: 'loading',
                  label: 'Loading 加载'
                },
                {
                  value: 'message',
                  label: 'Message 消息提示'
                },
                {
                  value: 'message-box',
                  label: 'MessageBox 弹框'
                },
                {
                  value: 'notification',
                  label: 'Notification 通知'
                }
              ]
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'NavMenu 导航菜单'
                },
                {
                  value: 'tabs',
                  label: 'Tabs 标签页'
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb 面包屑'
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown 下拉菜单'
                },
                {
                  value: 'steps',
                  label: 'Steps 步骤条'
                }
              ]
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog 对话框'
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip 文字提示'
                },
                {
                  value: 'popover',
                  label: 'Popover 弹出框'
                },
                {
                  value: 'card',
                  label: 'Card 卡片'
                },
                {
                  value: 'carousel',
                  label: 'Carousel 走马灯'
                },
                {
                  value: 'collapse',
                  label: 'Collapse 折叠面板'
                }
              ]
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    toggle(param) {
      this.popFlag = !this.popFlag
      if(param=='cancel'){
        this.popFlag =false
      }
      if(param=='course'){
        this.popFlag =false
      }
    },
    init() {
      var chartDom = document.getElementById('map')
      console.log(chinaJson, 'chinaJson')
      echarts.registerMap('china', { geoJSON: chinaJson })

      var myChart = echarts.init(chartDom)
      console.log(myChart, 'myChart')

      var option

      option = {
        // xAxis: {
        //   type: 'category',
        //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // },
        // yAxis: {
        //   type: 'value'
        // },
        visualMap:[{
          type:"piecewise",
          showLabel:true,
          piece:[
            {min:10,max:200,label:"当前省份"}
          ]
        }],
        tooltip: {
          show: true,
          className: 'chartTooltip',
          padding: 30
          // triggerOn: "",
        },
        geo: {
          map: 'china',
          selectedMode: 'single',
          select: {
            itemStyle: {
              areaColor: '#6DE5D7',
              borderColor: '#fff',
              borderWidth: 2
              // color:"red"
            }
          },
          emphasis: {
            itemStyle: {
              // color:"red",
              areaColor: '#6DE5D7',
              borderColor: '#fff',
              borderWidth: 2
            }
          },
          tooltip: {
            formatter: () => {
              return `
                 <div>
                  <span class="tooltip-prov">青海</span>
                  <span class="tooltip-service">服务青海职场数量</span>
                 </div>
                 <div>
                  <span class="tooltip-service-num">2</span>
                  <span class="tooltip-service-unit">个</span>
                   
                  </div>
                 <div class="tooltip-support">
                   <span>博岳</span><span class="tooltip-service-unit">(2个)</span><span>济南职场、青岛职场</span>
                 </div>
                 <div class="tooltip-support">
                   <span>博岳</span><span class="tooltip-service-unit">(2个)</span><span>济南职场、青岛职场</span>
                 </div>
                
                `
            }
          },
          regions: [
            {
              name: '北京',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '天津',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '上海',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '重庆',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '河北',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '河南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '云南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '辽宁',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '黑龙江',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '湖南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '安徽',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '山东',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '新疆',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '江苏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '浙江',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '江西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '湖北',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '广西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '甘肃',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '山西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '内蒙古',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '陕西',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '吉林',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '福建',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '贵州',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '广东',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '青海',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '西藏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '四川',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '宁夏',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '海南',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '台湾',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '香港',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            },
            {
              name: '澳门',
              value: Math.round(Math.random() * 1000),
              tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
            }
          ],
          itemStyle: {
            borderColor: '#ABC9FF',
            areaColor: '#E9F1FD'
          }
        }
      }
      myChart.on('geoselectchanged', function (event) {
        console.log(event, 'geoselectchanged')
        myChart.dispatchAction({
          type: 'showTip',
          geoIndex: 0,
          name: event.name
        })
      })

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.resource{
  padding-left: 12px;
  padding-right: 12px;
  height: 54px;
  display: flex;
  align-items: center;
  img {
    width: 14px;
    height: 26px;
    margin-right: 8px;
  }
  .resource-text{
    font-size: 13px;
    color: #5B6F83;
  }
  
}
.choose-top {
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 13px;
  .split-box {
    display: inline-block;
    width: 4px;
    height: 12px;
    background: #4958ea;
    border-radius: 2px 2px 2px 2px;
    margin-right: 4px;
  }
  .distribution {
    font-size: 14px;
    font-weight: 700;
    color: #1d2129;
  }
  .split-line {
    display: inline-block;
    width: 1px;
    height: 8px;
    background: #e5e5e7;
    margin-left: 12px;
    margin-right: 12px;
  }
  .more {
    cursor: pointer;
    color: #3476ed;
  }
  .toggle {
    font-size: 13px;
    color: #4d5969;
    cursor: pointer;
    // display: flex;
    // align-items: center;
    img {
      width: 9px;
      height: 8px;
    }
  }
}
.el-cascader-panel.is-bordered {
  border: none;
  border-bottom: 1px solid #eaedf5;
}
.el-cascader-panel {
  ::v-deep .el-cascader-node.in-active-path {
    color: #3476ed;
  }
  ::v-deep .el-cascader-node.is-active {
    color: #3476ed;
  }
}
.pop-pool {
  display: inline-block;
  box-shadow: 4px 1px 8px 1px #dbe9f5;
  border-radius: 4px 4px 4px 4px;
  .bottom-button {
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    .button {
      width: 58px;
      height: 27px;
      font-size: 13px;
      border-radius: 2px 2px 2px 2px;
      line-height: 27px;
      text-align: center;
      cursor: pointer;
    }
    .cancel {
      background: #eeeef0;
      color: #333;
    }
    .course {
      background: #3476ec;
      color: #ffffff;
      margin-left: 12px;
    }
  }
}
.map-component {
  width: 528px;
  height: 900px;
}
.map {
  width: 500px;
  height: 500px;
  ::v-deep .chartTooltip {
    background: linear-gradient(180deg, #ffffff 0%, #e9f9ff 100%);
    border-radius: 4px 4px 4px 4px;
    // width:249px;
    // height:119px;
    // color:red;
    .tooltip-prov {
      display: inline-block;
      width: 31px;
      height: 16px;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
      background: #1573ff;
      border-radius: 2px 2px 2px 2px;
      color: #fff;
    }
    .tooltip-service {
      font-size: 14px;
      color: #4d5969;
      font-weight: 700;
    }
    .tooltip-service-num {
      font-size: 14px;
      color: #11dac9;
      font-weight: bold;
    }
    .tooltip-service-unit {
      font-size: 12px;
      color: #4d5969;
    }
    .tooltip-support {
      font-size: 12px;
      color: #1574ff;
    }
  }
}
</style>
